<script setup lang="ts">
import { ref } from "vue";
import { PRODUCT_LIST } from "@/utils/constant/tableColumns";
const pool_list = ref([
  {
    name: "商品标题商品标题商品商品标题商品标题商品标题商品商品标题",
    picUrl:
      "https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract01.jpg",
    jdId: "343367458493",
    ttId: "",
    moduleName: "模板名称",
    createTime: "2023-01-01 00:00:00",
    status: 1,
    errorMsg: "失败原因失败原因失败",
    type: 1,
  },
  {
    name: "商品标题商品标题商品商品标题商品标题商品标题商品商品标题",
    picUrl:
      "https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract01.jpg",
    jdId: "343367458493",
    ttId: "",
    moduleName: "模板名称",
    createTime: "2023-01-01 00:00:00",
    status: 2,
    errorMsg: "失败原因失败原因失败",
    type: 2,
    typeInfo: "店铺同步",
  },
  {
    name: "商品标题商品标题商品商品标题商品标题商品标题商品商品标题",
    picUrl:
      "https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract01.jpg",
    jdId: "343367458493",
    ttId: "",
    moduleName: "模板名称",
    createTime: "2023-01-01 00:00:00",
    status: 3,
    errorMsg: "失败原因失败原因失败",
    type: 1,
  },
]);

const productStatus = ref("0");

</script>

<template>
  <div>
    <a-radio-group v-model:value="productStatus">
      <a-radio-button value="0">上架中(0)</a-radio-button>
      <a-radio-button value="1">上架成功(1)</a-radio-button>
      <a-radio-button value="2">上架失败(2)</a-radio-button>
    </a-radio-group>
  </div>

  <a-table class="mt-16px" :scroll="{ y: 'calc(100vh - 440px)' }" :columns="PRODUCT_LIST" :data-source="pool_list">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <div class="flex items-center">
          <img :src="record.picUrl" class="w-80px h-80px" />
          <div class="ml-8px mr-30px">
            <div class=" font-18px line-clamp-2 overflow-hidden">{{ record.name }}</div>
            <div class="font-16px text-gray-500">
              京东ID：{{ record.jdId }}
            </div>
            <div class="font-16px text-gray-500">
              抖店ID：{{ record.ttId || '-' }}
            </div>
          </div>
        </div>
      </template>
      <template v-if="column.key === 'status'">
        <a-tag v-if="record.status === 1" color="warning">上架中</a-tag>
        <a-tag v-else-if="record.status === 2" color="success">上架中</a-tag>
        <div class="block" v-else>
          <a-tag color="error">上架失败</a-tag>
          <div>{{ record.errorMsg }}</div>
        </div>
      </template>
      <template v-if="column.key === 'type'">
        <a-tag v-if="record.type === 1" color="warning">商品上架</a-tag>
        <div class="block" v-else>
          <a-tag color="error">店铺同步</a-tag>
          <div>{{ record.typeInfo }}</div>
        </div>
      </template>
      <template v-if="column.key === 'operation'">
        <a-button type="link">更多信息</a-button>
      </template>
    </template>
  </a-table>
</template>
